<template>
    名称:
    <input type="text" v-model="name">
    适用门店:
    <select >
    <option :value="0">请选择</option>
    <option  v-for="i in xlinfo" :value="i.Id">{{ i.S_Name }}</option>
</select>
<input type="button" value="查询" @click="Show">
<table border="1">
    <thead>
        <tr>
        <td style="width: 180px;">标题</td>
        <td>券类型</td>
        <td>副标题</td>
        <td>图片</td>
        <td>剩余库存</td>
        <td>每人限领</td>
        <td>使用条件</td>
        <td>减免金额</td>
        <td>有效期</td>
        <td>适用业务</td>
        <td>适用须知</td>
        <td>客服电话</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody v-for="i in showinfo">
 
        <tr>
        <td>{{ i.Name }}</td>
        <td>{{ i.QuanType }}</td>
        <td>{{ i.FName }}</td>
        <td>{{ i.Disimg }}</td>
        <td>{{ i.Num }}</td>
        <td>{{ i.Stop }}</td>
        <td>{{ i.Sytiaojian }}</td>
        <td>{{ i.JianMian }}</td>
        <td>{{ i.YouXTime }}</td>
        <td>{{ i.SyYewu }}</td>
        <td>{{ i.SyXuzhi }}</td>
        <td>{{ i.Phone.substring(0,3)+"****"+i.Phone.substring(7,12)}}</td>
        <td>
            <input type="button" value="修改" @click="xiugai(i.Id)">
            <input type="button" value="删除" @click="shanchu(i.Id)">
        </td>
 
    </tr>
    </tbody>
   <span>
    <a href="#" @click="page('F')">首页</a><br>
    <a href="#" @click="page('S')">上一页</a><br>
    <a href="#" @click="page('N')">下一页</a><br>
    <a href="#" @click="page('W')">尾页</a><br>
    共{{ fenye.Total }}行<br>
     共{{ fenye.Count }}页 <br>
     当前{{ fenye.index }}页<br>
      每页{{ fenye.size }}行<br>
   </span>
 
</table>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'

const  use=useRoute();
const  user=useRouter();
const name=ref("");
const mendian=ref()
const xlinfo=ref({
    "Id": 1,
    "S_Name": "河北石家庄"
})
const xiala=()=>{
axios.get("https://localhost:7238/api/Dis/Getall")
.then(res=>{
xlinfo.value=res.data
})

}
const showinfo=ref([{
"Id": 1,
"Name": "",
"QuanType": "",
"FName": "",
"Disimg": "",
"Num": "",
"Stop": "",
"Sytiaojian": "",
"JianMian": "",
"YouXTime": "",
"SyYewu": "",
"SyXuzhi": "",
"Phone": "",
"S_id": 1,
"Shop": null,
"IsDel": false
}])
onMounted(()=>{
    Show();    xiala()
})
const Show=()=>{
  axios.get("https://localhost:7238/api/Dis/GetDisPage",{
    params:{
        name:name.value,
        MenDian:mendian.value,
        index:fenye.value.index,
        size:fenye.value.size,
    
    }
  })
  .then(res=>{
    console.log(res);
    
    showinfo.value=res.data.Data_info
    fenye.value.Count=res.data.Count
    fenye.value.Total=res.data.Total

  })
}

const xiugai=(Id:number)=>{
    user.push({
        name:"UpdaDisCount",
        params:{
            id:Id
        }
    })
}
const fenye=ref({
    index:1,
    size:2,
    Count:3,
    Total:3
})
const page=(i:any)=>{
    switch(i){
        case 'F':
            fenye.value.index=1;
            break;
            case 'S':
         if(fenye.value.index<fenye.value.Count){
            alert("已经是第一页了");
         }else{
            fenye.value.index--;
           
         }
            break;
            case 'N':
           if(fenye.value.index<fenye.value.Count){
            fenye.value.index++; 
           }else{
           alert("已经是最后一页了")
           }
            break;
            case 'W':
           fenye.value.index=fenye.value.Count;
            break;
    }
    Show()
}

const shanchu=(Id:number)=>{
    axios.delete("https://localhost:7238/api/Dis/DelDis",{
        params:{
            id:Id
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("删除成功");
            Show()
        }else{
            alert("删除失败")
        }
    })
}
</script>

<style scoped>

</style>